<template>
	<w-container class='page-bg order-list'>
		<w-navbar navType="default" id="my-nav" title="图鉴订单"></w-navbar>
		<w-tabs scrollable line-width="0" :activeStyle="{color:'#9F2825'}" :current='currenIndex' :tabList="orderMap"
			@change="changOrderStatus"></w-tabs>
		<view class="list pa-16">
			<view class="bg-color-item br-12 pa-12 order-item mb-16" v-for="item in list" :key="item.order_id">
				<view class="flex flex-js-sb flex-ai-center">
					<view class="flex flex-ai-center">
						<text
							class="font-color-theme font-size-14">{{OrderStatusMap[13][item.order_status].title}}</text>
						<u-count-down @finish='finish'
							v-if="(item.createtime+payTimeLimt)*1000-nowTimestamp>=0&&item.order_status==1" class='ml-8'
							:time="(item.createtime+payTimeLimt)*1000-nowTimestamp" format="mm:ss"></u-count-down>
					</view>
					<view v-if="(item.createtime+payTimeLimt)*1000-nowTimestamp>=0&&item.order_status==1" class="flex">
						<w-button pain class="btnStyle mr-6" @click="cancelOpen(item.order_id)">取消支付</w-button>
						<w-button class="btnStyle" @click="goPay(item)">立即支付</w-button>
					</view>
				</view>
				<view class="pt-12 flex">
					<w-image src='/static/img/heightlight_codex.png' width="80" height="80"></w-image>
					<view class="pl-12 flex-1 flex flex-dir-col flex-js-sb">
						<view class="flex flex-js-sb">
							<text
								class="font-size-14 font-color-textPrimary text-overflow-2 flex-1">{{item.goods_name}}</text>
						</view>
						<view class="font-color-999">
							<text class="font-size-10">x</text>
							<text class="font-size-14">1</text>
						</view>
						<view class="flex flex-js-sb flex-ai-center">
							<text class="font-size-10 font-color-999">{{item.createtime|formatDate}}</text>
							<view class="font-color-price">
								<text class="font-size-10">￥</text>
								<text class="font-size-14">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<w-loading :type="loading" emptyType="order" emptyTop="100"></w-loading>
		<w-modal :show="cancelShow" title="取消支付" @action="cancelAction">
			<view class="flex flex-dir-col flex-ai-center pt-16">
				确认取消该订单？
			</view>
		</w-modal>
	</w-container>
</template>

<script>
	import {
		pictureOrderList,
		canclepictureOrder
	} from '@/api/order/index.js'
	import {
		mapState
	} from 'vuex'
	import OrderStatusMap from '@/pages/order/components/orderStatusMap.js'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		data() {
			return {
				orderMap: [{
						name: '全部',
						status: 0,
					}, {
						name: '未完成',
						status: 1,
					},
					{
						name: '已完成',
						status: 2,
					},
					{
						name: '已取消',
						status: 3,
					},
				],
				search: {
					page: 1,
					status: 0,
				},
				loading: 'none',
				list: [],
				OrderStatusMap,
				cancelShow: false,
				order_id: ''
			}
		},
		computed: {
			currenIndex() {
				return this.orderMap.findIndex(v => v.status == this.search.status)
			},
			...mapState('config', {
				payTimeLimt(state) {
					return state.info.pay_time_limit ? Number(state.info.pay_time_limit) : 0
				},
				nowTimestamp(state) {
					return state.nowTimestamp
				}
			}),

		},
		onShow() {
			this.changOrderStatus(this.orderMap[this.currenIndex]);
		},
		onPullDownRefresh() {
			this.changOrderStatus(this.orderMap[this.currenIndex]);
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			changOrderStatus({
				status
			}) {
				this.list = []
				this.search.status = status
				this.search.page = 1
				this.getList(this.search)
			},
			getList(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading'
				pictureOrderList(search).then(res => {
					this.loading = 'none'
					if (res.data.data.length == 0 && search.page == 1) {
						this.loading = 'empty'
					}
					if (res.data.data.length) {
						res.data.data.map(v => {
							this.$set(this.list, this.list.length, v);
						})
						this.search = search;
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			loadMore() {
				let search = this.$tools.copyObj(this.search);
				search.page++
				this.getList(search)
			},
			cancelOpen(id) {
				this.order_id = id
				this.cancelShow = true
			},
			cancelAction(e) {
				if (e) {
					canclepictureOrder({
						order_id: this.order_id
					}).then(() => {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						this.list = []
						this.search.page = 1
						this.getList(this.search)
					})
				}
				this.cancelShow = false
			},
			goPay(item) {
				this.pay({
					pay_type: 4,
					order_type: 20,
					pay_way: 'huifu',
					order_number: item.order_sn,
					order_id: item.order_id
				})
			},
			pay({
				pay_type,
				order_type,
				order_number,
				order_id,
				pay_way
			}) {
				// return
				new PayUtil({
					pay_type,
					order_number,
					order_type,
					pay_way,
					order_id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btnStyle {
		width: 104rpx;
		height: 44rpx !important;
		font-size: 20rpx;
		border-radius: 8rpx;
	}

	.order-list {
		/deep/ .u-tabs__wrapper__nav__item {
			flex-grow: 1;
		}

		/deep/ .u-tabs__wrapper__nav {
			// background-image: url($IMG_URL + '/static/bg/my-bg.png');
			background-size: 100% auto;
			background-position: top;
		}


		/deep/ .u-count-down__text {
			color: #9F2825
		}

		&-container {}

		.batch-action {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
		}
	}
</style>